<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>会员管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/app/admin/component/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" media="all">
    <style>
        /* 顶部快捷栏样式 */
        .layui-tab {
            margin: 0;
            border-bottom: 1px solid #f6f6f6;
        }
        .layui-tab-title {
            border: none;
        }
        .layui-tab-title li {
            min-width: 100px;
            padding: 0;
        }
        .layui-tab-title li a {
            display: block;
            padding: 0 15px;
            text-decoration: none;
            color: #666;
        }
        .layui-tab-title .layui-this {
            color: #009688;
            border-bottom: 2px solid #009688;
        }
        .layui-tab-title .layui-this a {
            color: #009688;
        }
        /* 统计卡片样式 */
        .layui-card {
            margin-bottom: 15px;
            border-radius: 2px;
            box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
        }
        .layui-card-header {
            height: 42px;
            line-height: 42px;
            padding: 0 15px;
            border-bottom: 1px solid #f6f6f6;
            color: #333;
            border-radius: 2px 2px 0 0;
            font-size: 14px;
        }
        .layui-card-body {
            padding: 10px 15px;
            line-height: 24px;
        }
        .layui-card-body h2 {
            font-size: 36px;
            margin: 10px 0;
        }
        .layui-card-body p {
            margin: 10px 0 0;
            font-size: 14px;
        }
        .layui-form {
            margin-top: 15px;
        }
    </style>
</head>
<body>
    <div class="layui-fluid">
        <!-- 顶部快捷栏 -->
        <div class="layui-row">
            <div class="layui-col-md12">
                <div class="layui-tab">
                    <ul class="layui-tab-title">
                        <li><a href="/app/ky_shouyin/index">首页</a></li>
                        <li><a href="/app/ky_shouyin/member/info">会员信息</a></li>
                        <li class="layui-this"><a href="/app/ky_shouyin/member/index">会员列表</a></li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- 顶部统计卡片 -->
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md3">
                <div class="layui-card" style="background-color: #67C23A;">
                    <div class="layui-card-header" style="color: #fff;">今日新增</div>
                    <div class="layui-card-body" style="color: #fff;">
                        <h2 id="today-new">0</h2>
                        <p>本周: <span id="week-new">0</span> 人</p>
                    </div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="layui-card" style="background-color: #409EFF;">
                    <div class="layui-card-header" style="color: #fff;">今日生日</div>
                    <div class="layui-card-body" style="color: #fff;">
                        <h2 id="today-birthday">0</h2>
                        <p>本月: <span id="month-birthday">0</span> 人</p>
                    </div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="layui-card" style="background-color: #F56C6C;">
                    <div class="layui-card-header" style="color: #fff;">本月未消费</div>
                    <div class="layui-card-body" style="color: #fff;">
                        <h2 id="month-no-consumption">0</h2>
                        <p>近三月: <span id="three-month-no-consumption">0</span> 人</p>
                    </div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="layui-card" style="background-color: #E6A23C;">
                    <div class="layui-card-header" style="color: #fff;">今日到期</div>
                    <div class="layui-card-body" style="color: #fff;">
                        <h2 id="today-expire">0</h2>
                        <p>本月: <span id="month-expire">0</span> 人</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-card">
            <div class="layui-card-body">
                <!-- 搜索栏 -->
                <div class="layui-form" style="padding: 10px;">
                    <div class="layui-form-item">
                        <div class="layui-input-inline" style="width: 200px;">
                            <input type="text" name="keyword" placeholder="请输入会员卡号/姓名/手机" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-input-inline" style="width: 150px;">
                            <select name="level">
                                <option value="">全部等级</option>
                                <?php foreach($levels as $level): ?>
                                <option value="<?php echo $level->id; ?>"><?php echo $level->name; ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                        <div class="layui-input-inline" style="width: 150px;">
                            <select name="store_id">
                                <option value="">全部门店</option>
                                <?php foreach($stores as $store): ?>
                                <option value="<?php echo $store->id; ?>"><?php echo $store->name; ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                        <button class="layui-btn" lay-submit lay-filter="LAY-member-search">
                            <i class="layui-icon layui-icon-search"></i>查询
                        </button>
                        <button class="layui-btn layui-btn-primary" lay-submit lay-filter="LAY-member-reset">重置</button>
                    </div>
                </div>

                <!-- 操作按钮组 -->
                <div class="layui-btn-group" style="padding: 0 10px 10px;">
                    <!-- 批量操作按钮 -->
                    <button class="layui-btn layui-btn-danger" data-type="batchDel"><i class="layui-icon layui-icon-delete"></i>批量删除</button>
                    <button class="layui-btn layui-btn-normal" data-type="batchExport"><i class="layui-icon layui-icon-export"></i>导出</button>
                    <button class="layui-btn layui-btn-warm" data-type="batchSendSms"><i class="layui-icon layui-icon-dialogue"></i>发送短信</button>
                    <button class="layui-btn" data-type="batchSendCoupon"><i class="layui-icon layui-icon-gift"></i>发送优惠券</button>
                    <span class="layui-split"></span>
                    <!-- 原有按钮 -->
                    <button class="layui-btn" data-type="add"><i class="layui-icon layui-icon-add-1"></i>添加会员</button>
                    <button class="layui-btn" data-type="generate"><i class="layui-icon layui-icon-template-1"></i>生成会员卡</button>
                    <button class="layui-btn" data-type="card"><i class="layui-icon layui-icon-user"></i>会员卡管理</button>
                    <button class="layui-btn" data-type="level"><i class="layui-icon layui-icon-senior"></i>会员等级</button>
                    <button class="layui-btn" data-type="points"><i class="layui-icon layui-icon-diamond"></i>积分记录</button>
                    <button class="layui-btn" data-type="consumption"><i class="layui-icon layui-icon-rmb"></i>消费记录</button>
                </div>

                <table id="LAY-member-list" lay-filter="LAY-member-list"></table>
            </div>
        </div>
    </div>

    <script src="/app/admin/component/layui/layui.js"></script>
    <script src="/app/admin/component/pear/pear.js"></script>
    <script type="text/html" id="table-member-operation">
        <a class="layui-btn layui-btn-xs" lay-event="detail"><i class="layui-icon layui-icon-form"></i>详情</a>
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="recharge"><i class="layui-icon layui-icon-rmb"></i>充值</a>
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="checkIn"><i class="layui-icon layui-icon-ok"></i>签到</a>
        <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="adjustPoints"><i class="layui-icon layui-icon-edit"></i>调积分</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
    </script>
    <script>
    layui.use(['table', 'form', 'layer'], function(){
        var $ = layui.$
        ,table = layui.table
        ,form = layui.form
        ,layer = layui.layer;
        
        //会员列表
        table.render({
            elem: '#LAY-member-list'
            ,url: '/app/ky_shouyin/member/list'
            ,cols: [[
                {type: 'checkbox', fixed: 'left'}
                ,{field: 'card_no', title: '会员卡号', width: 120}
                ,{field: 'name', title: '姓名', width: 100}
                ,{field: 'phone', title: '手机号码', width: 120}
                ,{field: 'level_name', title: '会员等级', width: 100}
                ,{field: 'balance', title: '会员账户', width: 100, templet: function(d){
                    return (d.balance === null || d.balance === undefined) ? '0.00' : parseFloat(d.balance).toFixed(2);
                }}
                ,{field: 'points', title: '积分账户', width: 100}
                ,{field: 'card_times', title: '卡次余额', width: 100, hide: true}
                ,{field: 'store_name', title: '所属门店', width: 120}
                ,{field: 'birthday', title: '会员生日', width: 100, templet: function(d){
                    return d.birthday || '未绑定';
                }}
                ,{field: 'address', title: '地址', width: 150}
                ,{field: 'wechat', title: '微信绑定', width: 100, templet: function(d){
                    return d.wechat ? '<span class="layui-badge layui-bg-green">已绑定</span>' : '未绑定';
                }}
                ,{field: 'total_points', title: '剩余积分', width: 100, hide: true}
                ,{field: 'used_points', title: '累计积分', width: 100, hide: true}
                ,{field: 'created_at', title: '创建时间', width: 160}
                ,{title: '操作', width: 350, align: 'center', fixed: 'right', toolbar: '#table-member-operation'}
            ]]
            ,page: true
            ,limit: 15
            ,height: 'full-260'
            ,text: {
                none: '暂无数据'
            }
        });
        
        //监听工具条
        table.on('tool(LAY-member-list)', function(obj){
            var data = obj.data;
            if(obj.event === 'checkIn'){
                // 签到
                $.ajax({
                    url: '/app/ky_shouyin/member/checkIn'
                    ,type: 'POST'
                    ,data: {member_id: data.id}
                    ,success: function(res){
                        if(res.code === 0){
                            layer.msg('签到成功', {icon: 1});
                            obj.update({
                                points: data.points + res.data.points
                            });
                        } else {
                            layer.msg(res.msg, {icon: 2});
                        }
                    }
                });
            } else if(obj.event === 'adjustPoints'){
                // 积分调整
                layer.prompt({
                    formType: 0,
                    value: '',
                    title: '请输入调整积分（正数增加，负数减少）',
                    area: ['300px', '150px']
                }, function(value, index, elem){
                    layer.close(index);
                    layer.prompt({
                        formType: 2,
                        value: '',
                        title: '请输入调整说明',
                        area: ['300px', '150px']
                    }, function(description, index2, elem2){
                        layer.close(index2);
                        $.ajax({
                            url: '/app/ky_shouyin/member/adjustPoints'
                            ,type: 'POST'
                            ,data: {
                                member_id: data.id,
                                points: value,
                                description: description
                            }
                            ,success: function(res){
                                if(res.code === 0){
                                    layer.msg('调整成功', {icon: 1});
                                    obj.update({
                                        points: parseInt(data.points) + parseInt(value)
                                    });
                                } else {
                                    layer.msg(res.msg, {icon: 2});
                                }
                            }
                        });
                    });
                });
            } else if(obj.event === 'del'){
                layer.confirm('确定删除该会员？', function(index){
                    $.ajax({
                        url: '/app/ky_shouyin/member/delete'
                        ,type: 'POST'
                        ,data: {id: data.id}
                        ,success: function(res){
                            if(res.code === 0){
                                layer.msg('删除成功', {icon: 1});
                                obj.del();
                            } else {
                                layer.msg(res.msg, {icon: 2});
                            }
                        }
                    });
                    layer.close(index);
                });
            } else if(obj.event === 'recharge'){
                location.href = '/app/ky_shouyin/member/recharge?member_id=' + data.id;
            } else if(obj.event === 'detail'){
                location.href = '/app/ky_shouyin/member/detail?id=' + data.id;
            }
        });

        var active = {
            add: function(){
                layer.open({
                    type: 2
                    ,title: '添加会员'
                    ,content: '/app/ky_shouyin/member/add'
                    ,area: ['800px', '600px']
                    ,maxmin: true
                });
            },
            generate: function(){
                layer.confirm('确定要生成会员卡吗？', function(index){
                    // 显示loading
                    var loadIndex = layer.load(2);
                    
                    // 发送请求生成卡号
                    $.ajax({
                        url: '/app/ky_shouyin/member/generateCards',
                        type: 'POST',
                        dataType: 'json',
                        data: {
                            prefix: 'VIP',
                            count: 500
                        },
                        success: function(res){
                            layer.close(loadIndex);
                            if(res.code === 0){
                                layer.msg('生成成功，共生成' + res.data.total + '张会员卡', {
                                    icon: 1,
                                    time: 2000
                                });
                            } else {
                                layer.msg(res.msg, {
                                    icon: 2,
                                    time: 2000
                                });
                            }
                        },
                        error: function(){
                            layer.close(loadIndex);
                            layer.msg('生成失败，请重试', {
                                icon: 2,
                                time: 2000
                            });
                        }
                    });
                    layer.close(index);
                });
            },
            card: function(){
                location.href = '/app/ky_shouyin/member/card';
            },
            level: function(){
                location.href = '/app/ky_shouyin/member/level/index';
            },
            points: function(){
                location.href = '/app/ky_shouyin/member/points';
            },
            consumption: function(){
                location.href = '/app/ky_shouyin/member/consumption';
            },
            batchDel: function(){
                var checkStatus = table.checkStatus('LAY-member-list');
                if(checkStatus.data.length === 0){
                    return layer.msg('请选择要删除的会员', {icon: 2});
                }
                
                layer.confirm('确定删除选中的会员？', function(index){
                    var ids = checkStatus.data.map(function(item){
                        return item.id;
                    });
                    
                    $.ajax({
                        url: '/app/ky_shouyin/member/batchDelete',
                        type: 'POST',
                        data: {ids: ids},
                        success: function(res){
                            if(res.code === 0){
                                layer.msg('删除成功', {icon: 1});
                                table.reload('LAY-member-list');
                            } else {
                                layer.msg(res.msg, {icon: 2});
                            }
                        }
                    });
                    layer.close(index);
                });
            },
            batchExport: function(){
                var checkStatus = table.checkStatus('LAY-member-list');
                var ids = checkStatus.data.map(function(item){
                    return item.id;
                });
                
                window.location.href = '/app/ky_shouyin/member/export?ids=' + ids.join(',');
            },
            batchSendSms: function(){
                var checkStatus = table.checkStatus('LAY-member-list');
                if(checkStatus.data.length === 0){
                    return layer.msg('请选择要发送短信的会员', {icon: 2});
                }
                
                layer.prompt({
                    formType: 2,
                    title: '请输入短信内容',
                    area: ['400px', '200px']
                }, function(value, index, elem){
                    var ids = checkStatus.data.map(function(item){
                        return item.id;
                    });
                    
                    $.ajax({
                        url: '/app/ky_shouyin/member/sendSms',
                        type: 'POST',
                        data: {
                            ids: ids,
                            content: value
                        },
                        success: function(res){
                            if(res.code === 0){
                                layer.msg('发送成功', {icon: 1});
                            } else {
                                layer.msg(res.msg, {icon: 2});
                            }
                        }
                    });
                    layer.close(index);
                });
            },
            batchSendCoupon: function(){
                var checkStatus = table.checkStatus('LAY-member-list');
                if(checkStatus.data.length === 0){
                    return layer.msg('请选择要发送优惠券的会员', {icon: 2});
                }
                
                layer.open({
                    type: 2,
                    title: '发送优惠券',
                    content: '/app/ky_shouyin/member/sendCoupon?ids=' + checkStatus.data.map(function(item){
                        return item.id;
                    }).join(','),
                    area: ['500px', '400px']
                });
            }
        };
        
        $('.layui-btn-group .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        // 更新统计数据
        var stats = <?php echo json_encode($stats); ?>;
        $('#today-new').text(stats.today_new);
        $('#week-new').text(stats.week_new);
        $('#today-birthday').text(stats.today_birthday);
        $('#month-birthday').text(stats.month_birthday);
        $('#month-no-consumption').text(stats.month_no_consumption);
        $('#three-month-no-consumption').text(stats.three_month_no_consumption);

        //监听搜索
        form.on('submit(LAY-member-search)', function(data){
            var field = data.field;
            
            //执行重载
            table.reload('LAY-member-list', {
                where: field
            });
        });
        
        //监听重置
        form.on('submit(LAY-member-reset)', function(data){
            //重置表单
            $('input[name="keyword"]').val('');
            $('select[name="level"]').val('');
            $('select[name="store_id"]').val('');
            form.render('select');
            
            //重载表格
            table.reload('LAY-member-list', {
                where: {}
            });
        });
    });
    </script>
</body>
</html> 